<template>
  <div class="page">
    <div class="sidebar"></div>
    <div class="page">
      <div class="main-left" ref="scrollContainer">
        <Message :messages="messages" />
        <Sender />
      </div>
      <!-- <div class="main-right">
        <Content :messageId="messageId" :messages="messages" />
        <InputDialog v-model="state.dialog.input.show" :data="state.dialog.input.data" />
      </div> -->
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'
import Sender from './components/Sender.vue'
import Welcome from './components/Welcome.vue'
import Message from './components/Message.vue'
import Content from './components/content/Content.vue'
import InputDialog from './components/InputDialog.vue'

import { chat, state, scrollContainer } from './chat.js'
const { messages, messageId } = state

provide('/chat', {
  chat,
})
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.sidebar {
  background-color: #fafafa;
  width: 280px;
  padding: 12px 0;
}

.page {
  height: 100vh;
  padding: 12px;
  position: relative;
  margin: 0 auto;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.main-left {
  max-width: 1200px;
  flex: 1;
  // width: 50%;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: 12px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
// .main-right {
//   flex: 1;
//   overflow-y: auto;
//   overflow-x: hidden;
// }
</style>
